import React, { Component } from "react";
import MainLayout from "@component/mainLayout/mainLayout";
import { connect } from "react-redux";
import { Toast } from "antd-mobile/lib/index";
import xhfConfig from "@config/XHFConfig";
// import HeaderBanner from "@images/imageXHF/active-header-banner.png";
import yhTools from "@tools/yh";

import "./index.scss";

class DTwelveActivities extends Component {
	constructor(props) {
		super(props);
		this.state = {
			activeData: {} //优惠卷数据
		};
	}
	componentDidMount() {
		this.getCouponListByActivityNo();
	}
	/**
	 * @description: 初始化页面
	 */
	getCouponListByActivityNo = () => {
		const params = {
			url: xhfConfig.getCouponListByActivityNo,
			params: {},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			const { code, data = {}, message } = res;
			if (code === "0") {
				this.setState({
					activeData: data
				});
			} else {
				Toast.info(message, 2);
			}
		});
	};
	/**
	 * @description: 关闭sdk
	 */
	onClose = () => {
		yhTools.closePage();
	};
	/**
	 * @description: 去领劵列表
	 */
	goMyCoupons = () => {
		this.props.history.push({
			pathname: "/paymentDiscount/coupon"
		});
	};
	/**
	 * @description: 点击立即领取
	 */
	receive = () => {
		const params = {
			url: xhfConfig.drawCoupon,
			params: { no: this.state.activeData.no },
			_alertShow: false
		};
		Toast.loading("领取中...", 100, () => {});
		yhTools.request(params).then(res => {
			Toast.hide();
			if (res.code === "0") {
				Toast.info("领取成功", 2, () => {
					this.props.history.push({
						pathname: "/paymentDiscount/coupon"
					});
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	};
	render() {
		const _pageParams = {
			header: {
				title: "活动详情",
				goBackAction: () => {
					yhTools.closePage();
				}
			},
			history: this.props.history
		};
		const { activeData } = this.state;
		//activityStatus 1，活动未到时间，2活动开启且有券，3，活动结束，无券
		const {
			activityStatus,
			couponValue,
			couponCondition,
			showDate,
			activityDes = "",
			adInfo = {}
		} = activeData;
		const { topBanner, bottomBanner } = adInfo;
		return (
			<MainLayout pageParams={_pageParams} handleBack={this.onClose}>
				<div
					className="twelve-activities"
					style={{
						backgroundImage: bottomBanner
							? `url(${bottomBanner[0].imgUrl})`
							: ""
					}}
				>
					<div className="header">
						{topBanner && <img src={topBanner[0].imgUrl} />}
					</div>
					<div className="content">
						<div className="content-hedaer">
							<div className="content-header-left">
								<p>
									<i>{couponValue}</i>元
								</p>
								<span>满{couponCondition}可用</span>
							</div>
							<div className="content-header-right">
								<p>小辉付老用户专享</p>
								<span>{activityDes}</span>
							</div>
						</div>
						<div className="content-btns">
							<div className="other-volume" onClick={this.goMyCoupons}>
								查看其它券
							</div>
							{activityStatus === "2" && (
								<div className="receive" onClick={this.receive}>
									立即领取
								</div>
							)}
							{activityStatus === "1" && (
								<div className="disabled">{showDate}</div>
							)}
							{activityStatus === "3" && <div className="disabled">已抢完</div>}
						</div>
					</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const DTwelveActivitiesPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(DTwelveActivities);

export default DTwelveActivitiesPage;
